:root {
  --primary-color: #f7f7f7;
  --secondary-color: #212121;
  --lightgrey: #efefef;
  --darkgrey: #646464;
}.body {
  font-family: 'MuseoSans', Helvetica, Arial, sans-serif;
  font-size:1.7rem;
}

.lead {font-size:1.3em;}

.double-line {
margin-top: -0.5em;
display: block;
content: "";
height: 2px;
width: 8em;
background-color: #d0021b;
margin-left: auto;
margin-right: auto;
  }

.double-line-2 {
margin-top: 0.2em;
display: block;
content: "";
height: 2px;
width: 8em;
background-color: #d0021b;
margin-left: auto;
margin-right: auto;
  }/* ---------------------------------
    Navbar styles 
   --------------------------------- */
.navbar-section {
  padding-top: 0;
  padding-bottom: 0;
  /* navbar account name color */
  color: #ffffff;
  /* navbar color */
  background-color: #c8191c;
  /* navbar border at the top */
	border-top: 8px double #801620;
}

/* navbar icons text color */
.navbar-section .selection-count,
.navbar-section .avatar-user-dropdown{
  color: #ffffff;
}

/* navbar user dropdown border color */
.navbar-section .avatar-user-dropdown{
  border-color: #ffffff;
}

/* navbar icons color */
.navbar-section .svg-stroke path,
.navbar-section .svg-stroke line{
  stroke: #ffffff;
}

/* navbar icons color */
.navbar-section .svg-fill path{
  fill: #ffffff;
}

/* navbar links */
.navbar-section-content a { 
  color: #ffffff;
}

/* Hide logo and account name on mobile */
.account-logo .logo {
  display: none; 
  max-height: 4rem;
}

span.account-name {
  font-size: 1.6rem;
  display: none;
}

@media (min-width: 62em) {
  /* Display logo and account name on desktop */
  .navbar-section {
    height: 10rem;}
  .account-logo .logo,
  span.account-name {
    display:block;
    max-height:10rem;
    padding:0.5em 0;
  }	
  .dropdown-content {
    min-width: 16em;
}
}

/* New CSS*/
.nav-icon-text {color: #ffffff;}
.icon caret-down-icon {color: #ffffff;}
.navbar-section-content a {background-color: #C8191C;}
.navbar-section-content .dropdown-menu-item .dropdown-content a:hover {background-color: #801620; opacity: 1;}
.navbar-section-content {gap: 3rem; background-color: #C8191C;}
.navbar-border {border-bottom: 8px double #801620;}
.navbar-section-content .dropdown-button {color: #fff;}
.nav-burger-menu {color: #fff;}
.icon icon-close {color: #fff;}
.nav-close-burger-menu svg path {fill: #fff;}
.hamburger-menu svg path {d: path("M 2.25 18.003 L 21.75 18.003") stroke="#fff";}.footer-section {
  border-bottom: 10px solid #801620;
  background-image: url(https://www.christchurchnz.com/media/fhehssyu/otautahichristchurch_pattern_white.png); 
  background-repeat: repeat;
  height: 177px;
}
/* ---------------------
   Main Elements
   --------------------- */
.body {
  background-color: var(--primary-color);
}
.main {margin-top:10rem;}

.welcome-paragraph {
  font-size:2rem;
}

.whitebg {background-color:#fff;}

section.intro,
section#intro,
.center {
  text-align:center;
}

mark {
	padding: 1rem 2rem;
	background-color: #C8191C;
    color: black;
}

/* ----------------
   Search widget
   ---------------- */

.search-section {
  max-width: 120rem;
  margin: 5rem auto; 	
}

.search-label{
  display: none;
}

.filters{
  justify-content: center;
}

.search-grid-section .page-actions, 
.search-grid-section .grid, 
.search-grid-section .assets-pagination {
  background-color: var(--primary-color);
  padding-bottom:4rem;  
}
.change-grid-view .icon-text {
display: none;
}

.file-icon::before{
  border-color: var(--primary-color) var(--primary-color) rgba(255, 255, 255, .3) rgba(255, 255, 255, .35);
}

/* ----------------
   Masonry view 
   ----------------- */
.masonry-asset {
  margin-bottom: 2rem;
  background-color: white;
  padding: 0;
  float: left;
}
.masonry-asset:hover {opacity:0.6;}
.masonry-asset .asset-grid-icon {position:relative;}
.masonry-asset .asset-grid-name {margin-left:0;}

/* ------------
   Buttons 
   ------------ */
.button.asset-details-button {
  color: #fff;
  background-color: #C8191C;
  padding: 1rem 2rem;
}

.normal-button {
  color: white;
  background-color: black;
  padding: 1rem 2rem;
}

.cancel-button, .cancel-my-account-button {color:red; text-decoration:underline; background-color:white;}

.button-with-border{
    border-color: black;
}
.edit-profile-button {width:100%;}
.normal-button.save-profile-changes-button,
.normal-button.save-profile-changes-button  {
padding: 1rem 2rem;
}

a:hover,
.asset-add-to-basket-button:hover,
.clear-search-btn:hover{
  opacity:0.6;
}

/* ------------
   Gallery 
   ------------ */

/*-- Mobile --*/
.gallery-link,
.gallery-image {
  height: 8rem;
}

/*-- Desktop --*/
@media (min-aspect-ratio: 1/1) {
  .gallery-link,
  .gallery-image {
    height: 16rem;
  }
}


/* --------------
   Home Page 
   -------------- */
.intro-logo {
	max-width:20rem;
}

/* Albums widget */
.album-cover,.album-with-no-cover {border:5px solid #C8191C;}
.album-cover:hover, .album-with-no-cover:hover {border:5px solid #801620;}
/* new album select state */
a.album-selected {
  border: none;
  box-shadow: none;
}
a.album-selected img, a.album-selected div.album-with-no-cover {
  border:5px solid #FA3433;
  box-shadow: 0 15px 25px 1px #ccc;
}
a.album-selected span.album-title {
  color:#000;
  font-weight:bold;
}
/* end album select state */

/* custom social links article */
.social-links {margin-top:5em;}
.social-links a {font-size:2rem;padding:1rem 2rem;}
/* end */

/* fix download form terms field separation issue */
.form-checkbox.terms {
margin: 5rem 0;
}

/* New CSS */
.search-box {border: 1px solid #C8191C;}
.search-box:before {width: 6rem; height: 6rem; background-color: #C8191C; background-position: center; margin-left: -10px;}
.search-param {background-color: #C8191C;}
@media (min-width: 62em) {
  .account-logo .logo {max-height: 7.5rem;}}
.search-box:before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'><path d='M18.3666 18.3666L13.3 13.3L18.3666 18.3666ZM8.2333 15.8333C7.23525 15.8333 6.24698 15.6367 5.32491 15.2548C4.40283 14.8728 3.56501 14.313 2.85929 13.6073C2.15356 12.9016 1.59375 12.0638 1.21182 11.1417C0.829881 10.2196 0.633301 9.23135 0.633301 8.2333C0.633301 7.23525 0.829881 6.24698 1.21182 5.32491C1.59375 4.40283 2.15356 3.56501 2.85929 2.85929C3.56501 2.15356 4.40283 1.59375 5.32491 1.21182C6.24698 0.829881 7.23525 0.633301 8.2333 0.633301C10.2489 0.633301 12.182 1.43401 13.6073 2.85929C15.0326 4.28457 15.8333 6.21766 15.8333 8.2333C15.8333 10.2489 15.0326 12.182 13.6073 13.6073C12.182 15.0326 10.2489 15.8333 8.2333 15.8333Z' stroke='white'/></svg>");}
.clear-search-button {background-color: #C8191C; fill: #fff;}
.meta-search-param {color: #fff; outline: 1px solid #801620;}

/* filters */
.filters{
  justify-content: center;
}

.filter-options {
  z-index: 2
}

.filter-options .filter-option:hover {
  color: #fff;
  background-color: #C8191C;
}

.filter-options .filter-option.selected {
  font-weight: bold;
  background-color: transparent;
  color: #111;
}

.filter-button:hover {
  opacity: 0.7
}/* Grid assets and Asset details page */

/* content additions */
.asset-info span:not(.asset-id, .asset-source):before,
.AssetView .asset-size:before,
.AssetView .asset-dimensions:before,
.AssetView .asset-word-count:before {
  content: ' • ';
}

.AssetView .asset-latitude:before {
  content:'Latitude: ';
}

.AssetView .asset-longitude:before {
  content:'Longitude: ';
}

.asset-source:before {
  content: 'src: ';
}

.asset-licence-value:before {
  content: ' -';
  margin-right: 0.5rem;
}

/* Hidden */
.asset-details-section .asset-type,
.asset-tags-title,
.asset-size-title,
.asset-dimensions-title,
.asset-created-at,
.asset-id-title,
.asset-licence-title,
.asset-word-count-title,
.collections-section-title {
  display: none;
}

/* Layout */

.asset-page-wrapper {
  padding: 2rem 2em;
}
@media (min-width:768px) {
  .asset-page-wrapper {
    padding: 6rem 6em;
  }
}

.asset-page-wrapper .section {
  padding: 1rem 0;
}

.asset-details-section {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  row-gap: 0.9rem;
}

.asset-details-section article {
  flex: 0 0 100%;
}                                                                                                       

.asset-details-section .asset-size,
.asset-details-section .asset-dimensions,
.asset-details-section .asset-extension,
.asset-details-section .asset-id,
.asset-details-section .asset-word-count {
  flex: 0 0 auto;
}

.related-assets-section {
  border-top: 1px dotted color-mix(in srgb, var(--color-body-text) 20%, transparent);
  padding-bottom: 4rem;
}

/* Grid area ordering */ 

.AssetView .asset-name {
  order: 1;
  width: 100%;
}

.AssetView .asset-type-icon {
  order: 2;
}

.AssetView .asset-id {
  order: 3;
}

.AssetView .asset-word-count {
  order: 4;
}

.AssetView .asset-size {
  order: 5;
}

.AssetView .asset-dimensions {
  order: 6;
}

.AssetView .asset-description {
  order: 7;
}

.AssetView .asset-ai-description {
  order: 7;
}

.AssetView .asset-licence {
  order: 8;
}

.AssetView .asset-terms-of-use {
  order: 9;
  padding-bottom: 1rem;
}

.AssetView .asset-expiry-date {
  order: 10;
}

.AssetView .asset-created-at {
  order: 12;
}

.AssetView .asset-credit {
  order: 13;
}

.AssetView .asset-usage {
  order: 14;
}

.AssetView .asset-reference {
  order: 15;
}

.AssetView .asset-account {
  order: 15;
}

.AssetView .asset-location {
  order: 16;
}

.asset-page-wrapper {
  grid-template-areas: "breadcrumb breadcrumb breadcrumb" "proxy proxy proxy" "details details details"  "tags tags tags" "actions actions actions";
}
.asset-page-wrapper.post {
  grid-template-areas: "breadcrumb breadcrumb breadcrumb" "proxy proxy proxy" "tags tags tags" "actions actions actions";
}

@media (min-width:36em) {
  .asset-page-wrapper .section {padding: 0;}
  .asset-page-wrapper .asset-tags-section {padding: 3rem 0;}
  .asset-proxy-section {margin-right: 5rem;}
  .asset-page-wrapper {
    grid-template-areas: "breadcrumb actions actions" "proxy proxy details" "proxy proxy tags";
  }
  .asset-page-wrapper.post {
    grid-template-areas: "breadcrumb actions actions" "proxy proxy proxy" "tags tags tags";
  }
}
/* Sign Up Page styles */
.new-account-section .form-section {
    background-color:transparent;
    padding:0;
  }

.new-account-hint {font-size:2.5rem;}

.new-account-section .form-section form {
  background-color:antiquewhite;
  border-radius:1em;
  padding:1em;
}

@media screen and (min-width: 75em) {
  .new-account-section .form-section {
    width: 33vw;
    min-width:30em;
    margin:1em auto;
    background-color:transparent;
  }
  .new-account-section .form-section form {
    background-color:antiquewhite;
    border-radius:1em;
    padding:2em;
  }


  .new-account-section .new-account-embeded-image {
    padding:3rem;
    max-width:66vw;
  }
  
  blockquote {padding:2em;}
  
  blockquote span {
    display:block;
    width:100%;
    font-size:2.2rem;
    font-weight:bold;
  }
   blockquote cite {
  	 display:block;
     width:100%;
     font-size:1em;
     text-align:center;
  }	
  
  .signup-faq {margin:2.5%; text-align:left!important; padding-top:1em;}
}
.desktop {display:none;}

@media screen and (min-width: 36em){
  .desktop {display:block;}
  .mobile {display:none;}
  .albums-horizontal-grid .album-wrapper {
	max-width:100%;
    overflow-wrap:normal;
    flex-wrap:wrap;
  }
}

/* faq styles */
dl {
column-count: 2;
column-gap: 6rem;
}

.fw dl {
column-count: 3;
column-gap: 6rem;
}

dt {font-weight:bold;}
dt.subtitle {border-bottom: 2px solid #000;margin:2rem 0;}
dt.subtitle:first-child {border-bottom: 2px solid #000;margin:0 0 2rem 0;}
dd {margin-bottom:1rem;}
.bk-wall .brandkit-logo, .bk-wall .logo {
    max-height: 20rem;
}

.bk-wall {
  margin: 10rem 4rem 4rem;
}

.bk-wall .button {line-height: 2.4;}

section .intro, #intro {
  text-align:center;
}
section.blackbg {
  background-color: #121212;
  color: #fff!important;
}
section.whitebg {
  background-color: #fff;
  color: #000!important;
}
/* reset section padding on occasion */
.tight-bottom {padding-bottom:0;}
.tight-top {padding-top:0;}
.tight-left {padding-left:0;}
.tight-right {padding-right:0;}

/* html section */
.html-section {
  width:100vw;
  padding-top:6rem;
  padding-left:2em;
  padding-right:2em;
  padding-bottom:6em;
}
.html-section img {margin:2em auto;}
.html-section p img {margin:0 auto;}
.html-section:first-child {padding-top:12rem;}

@media (min-width:62em) {
  .html-section {
    padding-left:3em; 
    padding-right:3em;  
  }
}  
@media (min-width:75em) {
  .html-section {
    padding-left:calc(50% - 34.5em); 
    padding-right:calc(50% - 34.5em);   
  }
}  
@media (min-width:120em) {
  .html-section {
    padding-left:calc(50% - 45em); 
    padding-right:calc(50% - 45em);  
  }
}

/* show the Search label and the And/Or toggle in the Search Grid - check render colour in each theme */
label.search-label {display:block;}